<template>
  <div class="main">
    <div class="main_null_order" v-if="list.length <= 0">
      <div class="null_orders">
        <img :src="null_order" alt="" />
        <p>暂无此类订单</p>
      </div>
    </div>
    <div class="main_list" v-else>
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <van-pull-refresh v-model="refreshing2" @refresh="onRefresh">
        <!-- =={{ finished }}=={{ refreshing2 }} -->
        <!-- <template #pulling="props">
          <img
            class="doge"
            src="https://img01.yzcdn.cn/vant/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template> -->
        <van-list
          v-model="loading2"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in list"
            :key="item.order_id"
            @click="goToCarDetail(item)"
          >
            <div class="card">
              <div class="head">
                <div class="head_left">预定时间：{{ item.book_time }}</div>
                <div
                  class="head_right"
                  :class="{
                    type1:
                      item.order_status == 3 || item.order_status == 2
                        ? true
                        : false,
                    type2:
                      item.order_status == 1 || item.order_status == 4
                        ? true
                        : false,
                    type3: item.order_status == 5 ? true : false
                  }"
                >
                  {{
                    item.order_status == 1
                      ? "已完成"
                      : item.order_status == 2
                      ? "待支付"
                      : item.order_status == 3
                      ? "预约中"
                      : item.order_status == 4
                      ? "预约成功"
                      : item.order_status == 5
                      ? "已取消"
                      : item.order_status == 6
                      ? "已退订"
                      : item.order_status == 7
                      ? "退订申请中"
                      : item.order_status == 8
                      ? "待退款"
                      : ""
                  }}
                </div>
              </div>
              <div class="content">
                <div class="top">
                  <div class="top_1">
                    {{
                      item.order_service_type == 1
                        ? "实时单 "
                        : item.order_service_type == 2
                        ? "预约单 "
                        : item.order_service_type == 3
                        ? "接机 "
                        : item.order_service_type == 4
                        ? "送机"
                        : ""
                    }}
                  </div>
                  <div class="top_2">{{ item.depart_city }}</div>
                  <div class="top_3">
                    <span class="top_3_l">{{ item.cp_name }}</span
                    ><span>{{
                      item.car_type == 1
                        ? "经济型 "
                        : item.car_type == 2
                        ? "舒适型 "
                        : item.car_type == 3
                        ? "豪华型 "
                        : item.car_type == 4
                        ? "商务车"
                        : item.car_type == 5
                        ? "大巴（20人以下）"
                        : item.car_type == 6
                        ? "大巴（20人以上）"
                        : item.car_type == 7
                        ? "出租车"
                        : ""
                    }}</span>
                  </div>
                </div>
                <div class="midle">
                  <div class="midle_1">
                    <div class="midle_1_l"><van-icon name="clock" /></div>
                    <div>{{ item.depart_time }}用车</div>
                  </div>
                  <div class="midle_2">
                    <div class="midle_2_l"></div>
                    <div>{{ item.depart_place }}</div>
                  </div>
                  <div class="midle_3">
                    <div class="midle_3_l"></div>
                    <div>{{ item.arrive_place }}</div>
                  </div>
                </div>
                <div class="price">
                  <!-- 订单金额 -->
                  <span class="price_l">￥</span>{{ item.order_price }}
                </div>
              </div>
              <div class="foot">乘车人：{{ item.passenger_name }}</div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
  watch,
  watchEffect
} from "vue";
// import FooterTabTime from "../../FooterTabTime/FooterTabTime.vue";
import null_order from "/@/assets/img/carOrder/null_order.png";
export default {
  name: "",

  // 订单查看类型  order_reserver_type: 1全部订单; 2个人订单;
  // 订单列表类型  order_list_type: 0全部; 1预约中; 2预约成功; 3已完成;4已退订
  props: {
    list: {
      type: [Object, Array],
      dafault: () => {
        return [];
      }
    },
    finished: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      dafault: true
    },
    refreshing: {
      type: Boolean,
      dafault: false
    }
  },
  components: {
    // FooterTabTime
  },
  data() {
    return {
      refreshing2: false, //下拉刷新
      null_order,
      loading2: false // 开启上拉加载，结束时需要设置成false
    };
  },
  watch: {
    loading: {
      handler(newVal, oldVal) {
        this.loading2 = newVal;
      }
    },
    refreshing: {
      handler(newVal, oldVal) {
        this.refreshing2 = newVal;
      }
    },
    list: {
      handler(newVal, oldVal) {
        this.refreshing2 = false;
        this.loading2 = false;
        console.log(newVal, 195);
        if (newVal.length <= 0) {
          // 显示暂无此类订单图片
        }
      }
    }
  },
  methods: {
    /* 下拉刷新，触发父组件的函数 */
    onRefresh() {
      this.$emit("refresh");
    },
    /* 上拉加载，触发父组件的函数 */
    onLoad() {
      this.$emit("load");
    },
    // 查看用车订单详情
    goToCarDetail(item) {
      console.log("查看订单详情", item);
      this.$router.push({
        path: "/CarOrderDetail",
        query: { id: item.order_id }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  // background-color: #f00;
  background-color: #f3f4f5;
  // padding-bottom: 60px;

  .main_list {
    padding: 10px;
    // padding-top: 160px;
    :deep(.van-cell) {
      margin-bottom: 10px;
      padding: 0;
      border-radius: 7px;
    }
    .card {
      background-color: #fff;
      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        font-size: 12px;
        color: #aaadb1;
        .head_right {
          font-size: 14px;
          font-weight: 600;
        }
        .type1 {
          color: #ef6e33;
        }
        .type2 {
          color: #208cff;
        }
        .type3 {
          color: #b5b4b4;
        }
      }
      .content {
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        position: relative;
        .top {
          display: flex;
          align-items: center;
          padding-left: 15px;
          font-size: 14px;
          margin-top: 15px;
          .top_1 {
            font-size: 12px;
            font-family: PingFang-SC-Medium, PingFang-SC;
            font-weight: 500;
            color: #717171;
            line-height: 12px;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px solid #c3c3c3;
            margin-right: 6px;
          }
          .top_2 {
            color: #3a3a3a;
            margin-right: 6px;
            font-weight: 600;
          }
          .top_3 {
            color: #666666;
            font-weight: 600;
            .top_3_l {
              margin-right: 5px;
            }
          }
        }
        .midle {
          padding: 16px;
          font-size: 12px;
          font-weight: 500;
          color: #666666;
          .midle_1 {
            display: flex;
            .midle_1_l {
              width: 9px;
              height: 9px;
              margin-right: 5px;
            }
          }
          .midle_2 {
            margin: 15px 0;
            display: flex;
            align-items: center;
            .midle_2_l {
              margin-right: 5px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #08c183;
              margin-right: 5px;
            }
          }
          .midle_3 {
            display: flex;
            align-items: center;
            .midle_3_l {
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #f85544;
              margin-right: 5px;
            }
          }
        }
        .price {
          position: absolute;
          right: 15px;
          bottom: 15px;
          color: #ef6e33;
          font-weight: 600;
          font-size: 16px;
          .price_l {
            font-size: 11px;
          }
        }
      }
      .foot {
        height: 42px;
        line-height: 42px;
        padding-left: 15px;
        font-size: 14px;
        font-weight: 600;
        color: #3a3a3a;
      }
    }
  }
  .main_null_order {
    position: relative;
    width: 100%;
    height: 100px;
    .null_orders {
      position: absolute;
      bottom: -120px;
      left: 20%;
      font-size: 14px;
      color: #aaadb1;
      p {
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
